<template>
  <layout v-loading="loading || getTableLoading" viewName="指导视屏" :tableData="tableData" :workStep="workStep">
    <template #btn>
      <el-button type="primary" plain @click="showVideo = !showVideo">{{
        showVideo ? '隐藏视频' : '显示视频'
      }}</el-button>
      <el-button type="success" plain @click="openVideo">打开本地视频</el-button>
      {{ fileName }}
      <input id="v_file" accept=".mp4" type="file" ref="upload" @change="changeVideo" name="打开本地视频" />
    </template>
    <!-- <video
      v-if="showVideo"
      loop
      src="https://vdse.bdstatic.com//f13a391bcf73de64c2e965eddae17fc8?authorization=bce-auth-v1%2F40f207e648424f47b2e3dfbb1014b1a5%2F2017-05-11T09%3A02%3A31Z%2F-1%2F%2F05e5f8a459a1c44cf5507778e239fe62d4d63104a5aa5dfdc4b9efbafad673f1"
      controls="controls"
    >
      您的浏览器不支持 video 标签。
    </video> -->
    <video controls="controls" v-if="showVideo" loop autoplay>
      您的浏览器暂不支持播放视频，请使用谷歌浏览器！
      <source :src="videoUrl" type="video/mp4" />
    </video>
  </layout>
</template>

<script>
import layout from '../layout/index.vue';
import request from '../../../api/http';
import storage from 'js-storage';
import threeLocal from '../threeLocal';

export default {
  mixins: [threeLocal],
  components: { layout },
  data() {
    return {
      taskId: '',
      showVideo: true,
      fileName: '',
      videoUrl: '',
    };
  },
  created() {
    this.init();
    // setTimeout(() => {
    //   storage.localStorage.set('stepIndex', 1); // 进入第一步
    // }, 3000);
  },
  watch: {
    workStep: {
      handler(newVal, oldVal) {
        this.showVideo = false;
        setTimeout(() => {
          this.videoUrl = this.workStep.instruction_video;
          this.showVideo = true;
        }, 10);
      },
      deep: true,
    },
  },
  methods: {
    async init() {
      const data = await this.getData();
      this.showVideo = false;
      setTimeout(() => {
        this.videoUrl = this.workStep.instruction_video;
        this.showVideo = true;
      }, 10);
    },
    // 打开本地视频
    openVideo() {
      this.$refs.upload.click();
    },
    // 选本地视频函数
    changeVideo() {
      if (this.$refs.upload.files[0]) {
        this.showVideo = false;
        setTimeout(() => {
          var file = this.$refs.upload.files[0];
          this.fileName = file.name;
          var url = URL.createObjectURL(file);
          this.videoUrl = url;
          this.showVideo = true;
        }, 10);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#v_file {
  display: none;
}
video {
  height: 100%;
  width: 100%;
}
</style>
